<template>
  <div class="xingzheng" v-show="!isQuxian">
    <div class="title">行政处罚</div>
    <div class="con">
      <div class="anjian">
        <div class="title">案件数</div>
        <div
          class="zu"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <div id="yiban"></div>
          <div class="jianyi">
            <div id="jianyi"></div>
            <div class="wenzi">
              <div>
                案件数
                <br />
                <i>{{anjianData.simpleTotal}}</i>
              </div>
              <div>
                罚款案件数
                <br />
                <i>{{anjianData.simplePriceTotal}}</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="chufa">
        <div class="title">处罚总额</div>
        <div
          class="box"
          v-loading="chufa_loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <div class="nav_box">
            <div class="zongji">
              总计：
              <br />
              <span>{{fakuan}}</span> 元
              <!-- (壹万壹仟玖佰玖拾玖元整) -->
            </div>
            <div class="nav">
              <div @click="isActive = 'zhuan'" :class="isActive=='zhuan'?'active':''">专业</div>
              <div @click="isActive = 'di'" :class="isActive=='di'?'active':''">地区</div>
            </div>
          </div>
          <div id="chufa"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/plugs/bus";
import { getAnJianShu, getChuFaZongE } from "@/api/gaikuang.js";
export default {
  name: "XingZheng",
  data() {
    return {
      chufa_loading: true,
      loading: true,

      isQuxian: false,
      areaCity: { name: "文安县", code: "131026" },
      isActive: "di",
      fakuan: 0,
      anjianData: {
        sameRecordTotal: 690,
        simpleTotal: 168,
        year: "2019",
        sameLawsuitTotal: 690,
        sameRecordTotalLast: 816,
        simplePriceTotal: 160,
        ratio: 0.9524
      },
      chufaData: {
        itemArr: [
          "市辖区",
          "安次区",
          "广阳区",
          "固安县",
          "永清县",
          "香河县",
          "文安县",
          "大城县",
          "大厂回族自治县",
          "霸州市",
          "三河市"
        ],
        jianyiArr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        yibanArr: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      }
    };
  },
  methods: {
    async getData() {
      this.chufa_loading = true;
      this.loading = true;
      // try {
      var json = (
        await getAnJianShu({ year: this.$store.state.YEAR, areaCode: 131000 })
      ).data.data;
      // } catch (error) {
      // var json = {
      //   sameRecordTotal: 690,
      //   simpleTotal: 168,
      //   year: "2019",
      //   sameLawsuitTotal: 690,
      //   sameRecordTotalLast: 816,
      //   simplePriceTotal: 160,
      //   ratio: 0.9524
      // };
      // }

      this.loading = false;
      this.anjianData = json;
      this.init();
      this.getChuFaZongEData("di");
    },
    init() {
      this.drawYiban();
      this.jianyi = this.drawCircular2("jianyi", "简易案件");
    },
    drawYiban() {
      let json = this.anjianData;
      let value = [
        { value: json.sameRecordTotal, name: "立案数" },
        { value: json.sameLawsuitTotal, name: "结案数" },
        { value: json.sameRecordTotalLast, name: "上年度\n立案数" }
      ];
      this.yiban = this.pie("yiban", value);
    },
    pie(id, value) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(id));
      let m2R2Data = value;

      let zong = 0;
      for (let item of value) {
        zong += item.value;
      }

      let option = {
        color: ["#007fff", "#73c94e", "#e67a4c"],
        title: [
          {
            text: ["{a|总数}", "{b|" + zong + "}"].join("\n"),
            textStyle: {
              rich: {
                a: {
                  color: "#fff"
                  //   lineHeight: 18
                },
                b: {
                  color: "#07ccff"
                }
              }
            },
            textAlign: "center",
            x: "27%",
            y: "40%"
          },
          {
            text: "一般案件",
            x: "18",
            textStyle: {
              color: "#fff",
              fontSize: 12
            }
          }
        ],
        tooltip: {
          trigger: "item",
          position: "right",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          //   show: false,
          orient: "vertical",
          right: "0",
          top: "center",
          icon: "circle",
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: [
          {
            name: "标题",
            type: "pie",
            radius: ["36%", "58%"],
            center: ["30%", "50%"],
            startAngle: 300,
            minShowLabelAngle: 5,
            hoverAnimation: false,
            label: {
              show: false
              //   normal: {
              //     show: true,
              //     position: "outter",
              //     formatter: "{c}"
              //   }
            },
            data: m2R2Data
            // formatter: function(params) {
            //   if (params.indexOf("\n") == -1) {
            //     return params;
            //   } else {
            //     return (
            //       "{white|" +
            //       params.split("\n")[0] +
            //       "}\n" +
            //       params.split("\n")[1]
            //     );
            //   }
            // }
          }
        ]
      };
      myChart.setOption(option);
      // myChart.resize();
      return myChart;
    },
    drawCircular2(id, title) {
      let zhanbi = (this.anjianData.ratio * 100).toFixed();
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(id));
      // 绘制图表
      let option = {
        title: [
          {
            show: true,
            text: zhanbi + "%",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: "12",
              color: "#07ccff"
            }
          },
          {
            show: true,
            text: title,
            x: "center",
            textStyle: {
              fontSize: 12,
              color: "#fff"
            }
          }
        ],
        tooltip: {
          trigger: "item",
          position: function(point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else {
              // 左边放的下
              x = pointX - boxWidth;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else {
              // 上边放得下
              y = pointY - boxHeight;
            }

            return [x, y];
          },
          formatter: e => {
            return `${e.name}：${e.value} (${e.data.value}%)`;
          }
        },
        series: {
          name: "简单案件",
          type: "pie",
          radius: ["40%", "70%"],
          center: ["50%", "50%"],
          hoverAnimation: false,
          label: {
            normal: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            {
              name: "罚款数",
              value: zhanbi,
              itemStyle: {
                normal: {
                  //颜色渐变
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#31c0a5" },
                    { offset: 0.5, color: "#31c0a5" },
                    { offset: 1, color: "#2e60cf" }
                  ])
                }
              }
            },
            {
              name: "案件数",
              value: 100 - zhanbi,
              itemStyle: {
                color: "#36335e"
              }
            }
          ]
        }
      };
      myChart.setOption(option);
      // myChart.resize();
      return myChart;
    },
    drawLines(id) {
      let itemArr = this.chufaData.itemArr;
      let jianyiArr = this.chufaData.jianyiArr;
      let yibanArr = this.chufaData.yibanArr;
      let myChart = this.$echarts.init(document.getElementById(id));
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "20%",
          right: "4%",
          bottom: "18%",
          top: "16%"
          // containLabel: true
        },
        legend: {
          data: ["简易", "一般"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#fff"
          },
          itemWidth: 12,
          itemHeight: 5
          // itemGap: 35
        },
        xAxis: {
          type: "category",
          data: itemArr,
          axisLine: {
            lineStyle: {
              color: "white"
            }
          },
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              fontFamily: "Microsoft YaHei"
            }
          }
        },

        yAxis: {
          type: "value",
          // max: '1200',
          axisLine: {
            show: false,
            lineStyle: {
              color: "white"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)"
            }
          },
          axisLabel: {}
        },

        series: [
          {
            name: "简易",
            type: "bar",
            barWidth: "15%",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#248ff7"
                  },
                  {
                    offset: 1,
                    color: "#6851f1"
                  }
                ]),
                barBorderRadius: 11
              }
            },
            data: jianyiArr
          },
          {
            name: "一般",
            type: "bar",
            barWidth: "15%",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#8bd46e"
                  },
                  {
                    offset: 1,
                    color: "#09bcb7"
                  }
                ]),
                barBorderRadius: 11
              }
            },
            data: yibanArr
          }
        ]
      };

      myChart.setOption(option);

      // myChart.resize();
      return myChart;
    },
    async getChuFaZongEData(e) {
      this.chufa_loading = true;
      // try {
      var json = (
        await getChuFaZongE({ year: this.$store.state.YEAR, areaCode: 131000 })
      ).data.data;
      // } catch (error) {
      //   var json = {
      //     area: [
      //       {
      //         simpleTotal: 0,
      //         code: "131000",
      //         year: "2019",
      //         name: "廊坊市",
      //         sameTotal: 614901.36
      //       },
      //       {
      //         simpleTotal: 0,
      //         code: "131002",
      //         year: "2019",
      //         name: "安次区",
      //         sameTotal: 4000
      //       },
      //       {
      //         simpleTotal: 1000,
      //         code: "131003",
      //         year: "2019",
      //         name: "广阳区",
      //         sameTotal: 132800
      //       },
      //       {
      //         simpleTotal: 0,
      //         code: "131022",
      //         year: "2019",
      //         name: "固安县",
      //         sameTotal: 22500
      //       },
      //       {
      //         simpleTotal: 9000,
      //         code: "131023",
      //         year: "2019",
      //         name: "永清县",
      //         sameTotal: 21500
      //       },
      //       {
      //         simpleTotal: 0,
      //         code: "131024",
      //         year: "2019",
      //         name: "香河县",
      //         sameTotal: 295300
      //       },
      //       {
      //         simpleTotal: 2500,
      //         code: "131025",
      //         year: "2019",
      //         name: "大城县",
      //         sameTotal: 21000
      //       },
      //       {
      //         simpleTotal: 1200,
      //         code: "131026",
      //         year: "2019",
      //         name: "文安县",
      //         sameTotal: 610700
      //       },
      //       {
      //         simpleTotal: 0,
      //         code: "131028",
      //         year: "2019",
      //         name: "大厂回族自治县",
      //         sameTotal: 2000
      //       },
      //       {
      //         simpleTotal: 19000,
      //         code: "131081",
      //         year: "2019",
      //         name: "霸州市",
      //         sameTotal: 95400
      //       },
      //       {
      //         simpleTotal: 108400,
      //         code: "131082",
      //         year: "2019",
      //         name: "三河市",
      //         sameTotal: 596004
      //       }
      //     ],
      //     specialty: [
      //       {
      //         simpleTotal: 5500,
      //         code: "01",
      //         year: "2019",
      //         name: "公共场所",
      //         sameTotal: 982300
      //       },
      //       {
      //         simpleTotal: 1400,
      //         code: "02",
      //         year: "2019",
      //         name: "生活饮用水",
      //         sameTotal: 31000
      //       },
      //       {
      //         simpleTotal: 0,
      //         code: "03",
      //         year: "2019",
      //         name: "职业卫生",
      //         sameTotal: 0
      //       },
      //       {
      //         simpleTotal: 0,
      //         code: "04",
      //         year: "2019",
      //         name: "放射诊疗",
      //         sameTotal: 49200
      //       },
      //       {
      //         simpleTotal: 0,
      //         code: "05",
      //         year: "2019",
      //         name: "学校卫生",
      //         sameTotal: 0
      //       },
      //       {
      //         simpleTotal: 14100,
      //         code: "06",
      //         year: "2019",
      //         name: "医疗卫生",
      //         sameTotal: 411800
      //       },
      //       {
      //         simpleTotal: 0,
      //         code: "0701",
      //         year: "2019",
      //         name: "消毒产品单位",
      //         sameTotal: 16700
      //       },
      //       {
      //         simpleTotal: 120100,
      //         code: "0703",
      //         year: "2019",
      //         name: "传染病防治",
      //         sameTotal: 579800
      //       },
      //       {
      //         simpleTotal: 0,
      //         code: "0704",
      //         year: "2019",
      //         name: "餐饮具集中消毒单位",
      //         sameTotal: 0
      //       },
      //       {
      //         simpleTotal: 0,
      //         code: "08",
      //         year: "2019",
      //         name: "血液安全",
      //         sameTotal: 0
      //       },
      //       {
      //         simpleTotal: 0,
      //         code: "09",
      //         year: "2019",
      //         name: "计划生育",
      //         sameTotal: 213305.36
      //       },
      //       {
      //         simpleTotal: 0,
      //         code: "20",
      //         year: "2019",
      //         name: "无证单位",
      //         sameTotal: 102000
      //       }
      //     ],
      //     total: { total: 2557205.36, year: "2019" }
      //   };
      // }

      if (e === "di") {
        this.chufaData.itemArr = [
          "廊坊市",
          "安次区",
          "广阳区",
          "固安县",
          "永清县",
          "香河县",
          "文安县",
          "大城县",
          "大厂回族自治县",
          "霸州市",
          "三河市"
        ];
        let diqu_json = json.area;
        diqu_json.forEach(val => {
          switch (val.name) {
            case "廊坊市":
              this.chufaData.jianyiArr[0] = val.simpleTotal;
              this.chufaData.yibanArr[0] = val.sameTotal;
              break;
            case "安次区":
              this.chufaData.jianyiArr[1] = val.simpleTotal;
              this.chufaData.yibanArr[1] = val.sameTotal;
              break;
            case "广阳区":
              this.chufaData.jianyiArr[2] = val.simpleTotal;
              this.chufaData.yibanArr[2] = val.sameTotal;
              break;
            case "固安县":
              this.chufaData.jianyiArr[3] = val.simpleTotal;
              this.chufaData.yibanArr[3] = val.sameTotal;
              break;
            case "永清县":
              this.chufaData.jianyiArr[4] = val.simpleTotal;
              this.chufaData.yibanArr[4] = val.sameTotal;
              break;
            case "香河县":
              this.chufaData.jianyiArr[5] = val.simpleTotal;
              this.chufaData.yibanArr[5] = val.sameTotal;
              break;
            case "大城县":
              this.chufaData.jianyiArr[7] = val.simpleTotal;
              this.chufaData.yibanArr[7] = val.sameTotal;
              break;
            case "文安县":
              this.chufaData.jianyiArr[6] = val.simpleTotal;
              this.chufaData.yibanArr[6] = val.sameTotal;
              break;
            case "大厂回族自治县":
              this.chufaData.jianyiArr[8] = val.simpleTotal;
              this.chufaData.yibanArr[8] = val.sameTotal;
              break;
            case "霸州市":
              this.chufaData.jianyiArr[9] = val.simpleTotal;
              this.chufaData.yibanArr[9] = val.sameTotal;
              break;
            case "三河市":
              this.chufaData.jianyiArr[10] = val.simpleTotal;
              this.chufaData.yibanArr[10] = val.sameTotal;
              break;
            default:
              break;
          }
        });
      } else {
        let zhuanye_json = json.specialty;
        this.chufaData.itemArr = [
          "公共场所",
          "饮水卫生",
          "职业卫生",
          "放射卫生",
          "学校卫生",
          "医疗卫生",
          "消毒产品",
          "传染病防治",
          "餐饮具",
          "血液安全",
          "计划生育"
        ];
        // 公共 饮水 职业 放射 学校
        // 医疗 消毒 传染 餐饮 血液 计划
        zhuanye_json.forEach(val => {
          switch (val.name) {
            case "公共场所":
              this.chufaData.jianyiArr[0] = val.simpleTotal;
              this.chufaData.yibanArr[0] = val.sameTotal;
              break;
            case "生活饮用水":
              this.chufaData.jianyiArr[1] = val.simpleTotal;
              this.chufaData.yibanArr[1] = val.sameTotal;
              break;
            case "职业卫生":
              this.chufaData.jianyiArr[2] = val.simpleTotal;
              this.chufaData.yibanArr[2] = val.sameTotal;
              break;
            case "放射诊疗":
              this.chufaData.jianyiArr[3] = val.simpleTotal;
              this.chufaData.yibanArr[3] = val.sameTotal;
              break;
            case "学校卫生":
              this.chufaData.jianyiArr[4] = val.simpleTotal;
              this.chufaData.yibanArr[4] = val.sameTotal;
              break;
            case "医疗卫生":
              this.chufaData.jianyiArr[5] = val.simpleTotal;
              this.chufaData.yibanArr[5] = val.sameTotal;
              break;
            case "消毒产品单位":
              this.chufaData.jianyiArr[7] = val.simpleTotal;
              this.chufaData.yibanArr[7] = val.sameTotal;
              break;
            case "传染病防治":
              this.chufaData.jianyiArr[6] = val.simpleTotal;
              this.chufaData.yibanArr[6] = val.sameTotal;
              break;
            case "餐饮具集中消毒单位":
              this.chufaData.jianyiArr[8] = val.simpleTotal;
              this.chufaData.yibanArr[8] = val.sameTotal;
              break;
            case "计划生育":
              this.chufaData.jianyiArr[9] = val.simpleTotal;
              this.chufaData.yibanArr[9] = val.sameTotal;
              break;
            case "无证单位":
              this.chufaData.jianyiArr[10] = val.simpleTotal;
              this.chufaData.yibanArr[10] = val.sameTotal;
              break;
            default:
              break;
          }
        });
      }
      this.fakuan = json.total.total;
      this.chufa_loading = false;
      this.chufa = this.drawLines("chufa");

      // getChuFaZongE({ year: 2019, areaCode: 131000 }).then(res => {
      //   if (e === "di") {
      //     this.chufaData.itemArr = [
      //       "廊坊市",
      //       "安次区",
      //       "广阳区",
      //       "固安县",
      //       "永清县",
      //       "香河县",
      //       "文安县",
      //       "大城县",
      //       "大厂回族自治县",
      //       "霸州市",
      //       "三河市"
      //     ];
      //     let diqu_json = res.data.data.area;
      //     diqu_json.forEach(val => {
      //       switch (val.name) {
      //         case "廊坊市":
      //           this.chufaData.jianyiArr[0] = val.simpleTotal;
      //           this.chufaData.yibanArr[0] = val.sameTotal;
      //           break;
      //         case "安次区":
      //           this.chufaData.jianyiArr[1] = val.simpleTotal;
      //           this.chufaData.yibanArr[1] = val.sameTotal;
      //           break;
      //         case "广阳区":
      //           this.chufaData.jianyiArr[2] = val.simpleTotal;
      //           this.chufaData.yibanArr[2] = val.sameTotal;
      //           break;
      //         case "固安县":
      //           this.chufaData.jianyiArr[3] = val.simpleTotal;
      //           this.chufaData.yibanArr[3] = val.sameTotal;
      //           break;
      //         case "永清县":
      //           this.chufaData.jianyiArr[4] = val.simpleTotal;
      //           this.chufaData.yibanArr[4] = val.sameTotal;
      //           break;
      //         case "香河县":
      //           this.chufaData.jianyiArr[5] = val.simpleTotal;
      //           this.chufaData.yibanArr[5] = val.sameTotal;
      //           break;
      //         case "大城县":
      //           this.chufaData.jianyiArr[7] = val.simpleTotal;
      //           this.chufaData.yibanArr[7] = val.sameTotal;
      //           break;
      //         case "文安县":
      //           this.chufaData.jianyiArr[6] = val.simpleTotal;
      //           this.chufaData.yibanArr[6] = val.sameTotal;
      //           break;
      //         case "大厂回族自治县":
      //           this.chufaData.jianyiArr[8] = val.simpleTotal;
      //           this.chufaData.yibanArr[8] = val.sameTotal;
      //           break;
      //         case "霸州市":
      //           this.chufaData.jianyiArr[9] = val.simpleTotal;
      //           this.chufaData.yibanArr[9] = val.sameTotal;
      //           break;
      //         case "三河市":
      //           this.chufaData.jianyiArr[10] = val.simpleTotal;
      //           this.chufaData.yibanArr[10] = val.sameTotal;
      //           break;
      //         default:
      //           break;
      //       }
      //     });
      //   } else {
      //     let zhuanye_json = res.data.data.specialty;
      //     this.chufaData.itemArr = [
      //       "公共场所",
      //       "饮水卫生",
      //       "职业卫生",
      //       "放射卫生",
      //       "学校卫生",
      //       "医疗卫生",
      //       "消毒产品",
      //       "传染病防治",
      //       "餐饮具",
      //       "血液安全",
      //       "计划生育"
      //     ];
      //     // 公共 饮水 职业 放射 学校
      //     // 医疗 消毒 传染 餐饮 血液 计划
      //     zhuanye_json.forEach(val => {
      //       switch (val.name) {
      //         case "公共场所":
      //           this.chufaData.jianyiArr[0] = val.simpleTotal;
      //           this.chufaData.yibanArr[0] = val.sameTotal;
      //           break;
      //         case "生活饮用水":
      //           this.chufaData.jianyiArr[1] = val.simpleTotal;
      //           this.chufaData.yibanArr[1] = val.sameTotal;
      //           break;
      //         case "职业卫生":
      //           this.chufaData.jianyiArr[2] = val.simpleTotal;
      //           this.chufaData.yibanArr[2] = val.sameTotal;
      //           break;
      //         case "放射诊疗":
      //           this.chufaData.jianyiArr[3] = val.simpleTotal;
      //           this.chufaData.yibanArr[3] = val.sameTotal;
      //           break;
      //         case "学校卫生":
      //           this.chufaData.jianyiArr[4] = val.simpleTotal;
      //           this.chufaData.yibanArr[4] = val.sameTotal;
      //           break;
      //         case "医疗卫生":
      //           this.chufaData.jianyiArr[5] = val.simpleTotal;
      //           this.chufaData.yibanArr[5] = val.sameTotal;
      //           break;
      //         case "消毒产品单位":
      //           this.chufaData.jianyiArr[7] = val.simpleTotal;
      //           this.chufaData.yibanArr[7] = val.sameTotal;
      //           break;
      //         case "传染病防治":
      //           this.chufaData.jianyiArr[6] = val.simpleTotal;
      //           this.chufaData.yibanArr[6] = val.sameTotal;
      //           break;
      //         case "餐饮具集中消毒单位":
      //           this.chufaData.jianyiArr[8] = val.simpleTotal;
      //           this.chufaData.yibanArr[8] = val.sameTotal;
      //           break;
      //         case "计划生育":
      //           this.chufaData.jianyiArr[9] = val.simpleTotal;
      //           this.chufaData.yibanArr[9] = val.sameTotal;
      //           break;
      //         case "无证单位":
      //           this.chufaData.jianyiArr[10] = val.simpleTotal;
      //           this.chufaData.yibanArr[10] = val.sameTotal;
      //           break;
      //         default:
      //           break;
      //       }
      //     });
      //   }
      //   this.fakuan = res.data.data.total.total;
      //   this.chufa_loading = false;
      //   this.chufa = this.drawLines("chufa");
      // });
    }
  },
  watch: {
    isActive(e) {
      this.getChuFaZongEData(e);
    }
  },
  created() {
    this.getData();
    Bus.$on("changeSize", e => {
      this.yiban.resize();
      this.jianyi.resize();
      this.chufa.resize();
    });
    Bus.$on("isQuxian", e => {
      this.isQuxian = e;
    });

    Bus.$on("AreaItem", e => {
      this.areaCity = e;
    });
  }
};
</script>

<style scoped lang="less">
.xingzheng {
  & > .title {
    font-size: 1.25rem;
    text-align: center;
    color: #07ccff;
    line-height: 3.125rem;
  }

  .con {
    display: flex;
    flex-direction: column;
    height: 92%;

    .anjian {
      width: 100%;
      height: 25%;
      padding: 0 1rem;
      .title {
        color: #07ccff;
        font-size: 1.1rem;
        line-height: 3em;
      }

      .zu {
        display: flex;
        height: 84%;

        & > div {
          width: 50%;
          //   height: 50%;

          &:nth-of-type(2) {
            display: flex;

            #jianyi {
              flex: 2;
            }

            .wenzi {
              color: #fff;
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-around;

              i {
                font-style: normal;
                font-weight: bold;
                color: #07ccff;
                // font-size: 1.3rem;
              }
            }
          }
        }
      }
    }

    .chufa {
      width: 100%;
      height: 80%;
      padding: 0 1rem;

      .title {
        color: #07ccff;
        font-size: 1.1rem;
        line-height: 3em;
        position: relative;
        z-index: 99999;
      }

      .box {
        height: 86%;

        .nav_box {
          height: 10%;
          display: flex;
          justify-content: space-between;

          .zongji {
            color: #fff;
            font-size: 12rem/16rem;

            span {
              color: #07ccff;
              font-size: 1.2rem;
            }
          }

          .nav {
            display: flex;

            & > div {
              color: #ffffff;
              display: flex;
              align-items: center;
              padding: 0.5rem 1rem;
              border: 0.0625rem solid #0290f6;
              background-color: #012d76;

              &:hover {
                cursor: pointer;
              }
            }

            .active {
              background-color: #0290f6;
            }
          }
        }

        #chufa {
          height: 95%;
        }
      }
    }
  }
}
</style>